<template>
	<view class="content">
		<view class="box" v-for="(item,index) in list" :key="item.id">
			<view class="info">
				<evan-checkbox-group v-model="selectedList" @change="changeChecked">
					<!-- <evan-checkbox v-model="item.checked"></evan-checkbox> -->
					<evan-checkbox :label="item.id" class="check" v-model="item.checked" shape="square" primary-color="#354e44"></evan-checkbox>

				</evan-checkbox-group>
				<image :src="item.productPic" mode=""></image>
				<view class="text">
					<view class="title">
						{{item.productName}}
					</view>
					<view class="sn">
						编号:{{item.productSkuId}}
					</view>
					<view class="price">
						价格: ￥{{item.price}}元
					</view>
					<view class="num">
						数量:{{item.quantity}}
					</view>
				</view>
			</view>
			<view class="btn">
				<view class="cut" @tap="cut(index)">
					-
				</view>
				<view class="number">
					{{item.quantity}}
				</view>
				<view class="add" @tap="add(index)">
					+
				</view>
			</view>
		</view>
		<view class="footer">
			<!-- <evan-checkbox v-model="checkedAll">全选</evan-checkbox> -->
			<evan-checkbox v-model="isCheckedAll" @change="allCheched" shape="square" primary-color="#354e44">全选</evan-checkbox>

			<view class="aa">
				<view class="total">
					￥:{{totalprice}}元
				</view>
				<view class="pay" @tap="tj">
					结算
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		findAllCartItem
	} from "@/api/mine/mine.js"
	import {
		addPreOrder
	} from "@/api/Detail/index.js"
	export default {
		data() {
			return {
				list: [],
				isCheckedAll: false,
				selectedList: [],
				totalprice: 0

			}
		},
		onLoad() {
			this.getList()
		},

		methods: {
			getList() {
				findAllCartItem().then(res => {
					console.log(res)
					this.list = res.data.items

					this.list.forEach(el => {
						el.checked = false
					})
				})
			},
			add(val) {
				console.log(val)
				this.list[val].quantity++
				this.total()
			},
			cut(val) {
				if (this.list[val].quantity == 1) {
					console.log('执行删除')
				} else {
					console.log(val)
					this.list[val].quantity--
				}
				this.total()
			},
			total() {

				var a = this.list.reduce((cur, el) => {
					if (el.checked) {
						return cur + el.price * el.quantity;
					} else {
						return cur;
					}
				}, 0)
				// console.log(a)
				this.totalprice = a


			},
			changeChecked(list) {
				this.isCheckedAll = (this.list.length == list.length);
				this.total();
			},
			// 全选
			allCheched(value) {
				this.list.forEach(item => item.checked = value);
				this.isCheckedAll = value;
				this.total();

			},
			tj() {
				var list = this.list.filter(el => {
					return el.checked == true
				})

				var newList = list.map((item, index) => {

					return Object.assign({}, {
						'productId': item.productId,
						'productQuantity': item.quantity,
						'productSkuId': item.productSkuId
					})

				})
				console.log(newList)
				addPreOrder({
					"orderItemList": newList
				}).then(res => {
					console.log(res)
					var orderId = res.data.orderId
					uni.navigateTo({

						url: `/pages/Detail/confirmOrder/confirmOrder?id=${orderId}`

					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	image {
		width: 128rpx;
		height: 136rpx;
	}

	.content {
		padding: 40rpx;

		.box {
			background-color: #fff;
			margin-bottom: 30rpx;
			border-radius: 30rpx;

			// display: flex;
			.info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				padding: 30rpx 40rpx;
				line-height: 40rpx;

				.text {
					color: #8d8d8d;

					.title {
						color: #000;
					}
				}
			}
		}
	}


	.footer {
		width: 100%;
		height: 140rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		padding: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;

		.aa {
			display: flex;
			align-items: center;
			.number{
				height: 80rpx;
				font-size: 36rpx;
				line-height: 80rpx;
			}
			.pay {
				width: 208rpx;
				height: 80rpx;
				background: #354e44;
				border-radius: 28rpx;
				color: #fff;
				font-size: 36rpx;
				line-height: 80rpx;
				text-align: center;
				margin-left: 30rpx;
			}
		}
	}

	.btn {
		display: flex;
		width: 100%;
		justify-content: flex-end;
		box-sizing: border-box;
		text-align: center;
		line-height: 60rpx;
		padding: 22rpx 40rpx;

		.cut {
			// padding: 15rpx 15rpx;
			width: 60rpx;
			height: 60rpx;
			background-color: #F2F4F3;
			border-radius: 50%;
		}

		.number {
			// padding: 20rpx;
			width: 90rpx;
			height: 60rpx;
			border-radius: 30rpx;
			background-color: #F2F4F3;
			margin-left: 20rpx;
		}

		.add {
			width: 60rpx;
			height: 60rpx;
			// padding: 15rpx 15rpx;
			background-color: #F2F4F3;
			border-radius: 50%;
			margin-left: 20rpx;
		}
	}
</style>
